<template>
  <div>
    <a-button class="editable-add-btn" @click="handleShowAddModel">添加分类</a-button>
    <a-table bordered :dataSource="dataSource" :columns="columns"></a-table>
      <a-modal title="添加分类"
        v-model="visible"
        :okButtonProps="{
          props: confirmProps
        }"
        @ok="handleAddCat">
        <a-spin :spinning="spinning">
          <a-input placeholder="请输入分类" v-model="inputVaule"/>
        </a-spin>
      </a-modal>
  </div>
</template>

<script>
import * as api from '@/api'
export default {
  data () {
    return {
      visible: false,
      spinning: false,
      confirmProps: {
        loading: false
      },
      inputVaule: '',
      dataSource: [],
      columns: [
        {
          title: 'ID',
          dataIndex: 'id'
        },
        {
          title: '分类名称',
          dataIndex: 'category_name'
        },
        {
          title: '分类下商品',
          dataIndex: 'count'
        }
      ]
    }
  },
  mounted () {
    api.getGoodsCat().then(response => {
      this.dataSource = response.data.map(e => {
        e.key = e.id
        return e
      })
    })
  },
  methods: {
    handleAddCat () {
      this.spinning = true
      this.confirmProps.loading = true
      api.AddGoodsCat({
        category_name: this.inputVaule
      }).then(r => {
        this.$message.info(r.message)
        this.spinning = false
        this.confirmProps.loading = false
        this.visible = false
        setTimeout(() => {
          this.$router.go(0)
        }, 300)
      })
    },
    handleShowAddModel () {
      this.visible = true
    }
  }
}
</script>

<style>
</style>
